import { Link } from 'react-router-dom'
import { Card, Breadcrumb, Form, Button, DatePicker, List } from 'antd'
import locale from 'antd/es/date-picker/locale/zh_CN'
import { useEffect, useState } from 'react'
import './index.scss'
import DrawerAgain from './components/DrawerAgain'
import { useDispatch, useSelector } from 'react-redux'
import { fetchBlogInfo } from '@/store/modules/blogStore'
import dayjs from 'dayjs'
import { getReportInfoAPI } from '@/api/report'

const { RangePicker } = DatePicker

const Report = () => {

  // 分页
  const [params, setParams] = useState({
    page: 1,
    per_page: 4,
    begin_pubdate: null,
    end_pubdate: null,
  })
  const pageChange = (page) => {
    // 拿到当前页参数 修改params
    setParams({
      ...params,
      page
    })
}

  const dispatch = useDispatch()
  // 获取举报信息
  const [reportInfo, setReportInfo] = useState([])
  const getReportInfo = async () => {
    const res = await getReportInfoAPI()
    setReportInfo(res.data)
  }
  useEffect(() => {
    getReportInfo()
  }, [])
 
  // 筛选，通过时间排序
  const filterReport = (formValue) => {
   const filteredItems = reportInfo.filter(item => {
    const itemDate = new Date(item.createTime) 
    return (!formValue.date[0] || itemDate >= formValue.date[0]) && (!formValue.date[1] || itemDate <= formValue.date[1])
  })
  setReportInfo(filteredItems)
  }

  //   抽屉组件
  const [open, setOpen] = useState(false)
  const showDrawer = async (id) => {
    setOpen(true)
    // 获取被举报的博客
    await dispatch(fetchBlogInfo(id))
  }
  const blogInfo = useSelector(state => state.blog.blogInfo)
  const closeDrawer = (value) => {
    setOpen(value)
    getReportInfo()
  }

  // 对举报信息处理完成后，更新列表
  const handleReportInfoChange = () => {
    getReportInfo()
  }
    return (
        <div className='report'>
          <Card
            title={
              <Breadcrumb items={[
                { title: <Link to={'/'}>首页</Link> },
                { title: '举报详情' },
              ]} />
            }
            style={{ marginBottom: 20 }}
          >
            <Form 
              initialValues={{ status: '' }}
              onFinish={filterReport}>    
              <Form.Item label="日期" name="date">
                {/* 传入locale属性 控制中文显示*/}
                <RangePicker locale={locale}></RangePicker>
              </Form.Item>
              <Form.Item>
                <Button type="primary" htmlType="submit" style={{ marginLeft: 40 }}>
                  筛选
                </Button>
              </Form.Item>
            </Form>
            
            <List
              itemLayout="vertical"
              size="large"
              pagination={{
                current: params.page,
                pageSize: params.per_page,
                onChange: pageChange,
                total: reportInfo.length
              }} 
              dataSource={reportInfo}
              renderItem={(item) => (
                <List.Item
                  key={item.id}
                >
                  <div className="header">
                    <List.Item.Meta
                      title='您收到一条举报信息'
                      description={dayjs(item.createTime).format('YYYY-MM-DD')}
                    />
                    <Button onClick={() => showDrawer(item.blogId)}>查看详情</Button>
                  </div>
                  <div className="content">
                    <span>{item.text}</span>                    
                  </div>
                  <DrawerAgain 
                    open={open} 
                    closeDrawer={closeDrawer} 
                    blogInfo={blogInfo}
                    reportInfo={item}
                    onUpdate={handleReportInfoChange}/>
                </List.Item>
              )}
            />
            
          </Card>
        </div>
    )
}

export default Report